<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import {getBorrowDatas} from "@/api/system/borrow";
const colorArr = ['#38C171', '#EEB700', '#C15038']
const areaArr = [
  ['rgba(56, 193, 113, 0.54)', 'rgba(92, 254, 130, 0)'],
  ['rgba(254, 220, 92, 0.54)', 'rgba(254, 220, 92, 0)'],
  ['rgba(193, 80, 56, 0.53)', 'rgba(254, 146, 92, 0)']
]

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      chart: null,
      month:null,
      monthStat:null

    }
  },
  async created() {
    await this.getData();
    await this.initChart();

  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
   async getData(){
      var year = new Date().getFullYear();
      console.log(year)
      await getBorrowDatas(year).then(res=>{
        console.log(res)
        this.month = res.month
        this.monthStat = res.monthStat
        // console.log(this.month)
        // console.log(this.monthStat)
      })
    },

    initChart() {
      var option = {
        title: {
          text: '档案利用统计',
          subtext: '统计指定年份的档案利用情况（默认为当年）',
          left: 'center',
          textStyle: {
            fontWeight: 400,
            fontSize: 18,

          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: this.month,
          axisLabel: {
            inside: false,
            interval: 0,
            textStyle: {
              fontWeight: 400,
              fontSize: 15,
            },
            margin: 15
          },
        },
        yAxis: {
          type: 'value',
          name: '单位: 条',
          nameTextStyle: {

            fontSize: 15
          },
          axisLabel: {
            textStyle: {
              fontWeight: 400,
              fontSize: 15,

            },
            formatter: '{value}',
            margin: 15
          }
        },
        toolbox: {
          show : true,
          feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
          }
        },
        series: [{
          data: this.monthStat,
          type: 'line',
          symbolSize: 12,
          smooth: false,
          showSymbol: true,
          itemStyle: {
            normal: {
              color: colorArr[1],
              lineStyle: {
                width: 3,
                type: 'solid'
              },
              label: {
                show: false
              }
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                [
                  { offset: 0, color: areaArr[1][0] },
                  { offset: 1, color: areaArr[1][1] }
                ],
                false
              )
            }
          },

        }]
      };
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption(option)
    },
  }
}
</script>
